<template>
	<view class="modifyProfile">
		<view @click="openAvater" class="profile_avatar">
			<image :src="header_img ? header_img : defaultImg" class="img"></image>
		</view>
		<u-action-sheet :actions="lists" :show="chooseAvaters" @select="editAvater" :closeOnClickOverlay="true"
			:closeOnClickAction="true" @close="closeAvaters" :safeAreaInsetBottom="true">
		</u-action-sheet>
		<view class="profile_form">
			<view class="form_item">
				<text class="text">姓名</text>
				<input type="text" v-model="profileForm.name">
			</view>
			<view class="form_item">
				<text class="text">手机</text>
				<input type="text" :disabled="true" v-model="profileForm.phone">
			</view>
			<view class="form_item">
				<text class="text">性别</text>
				<radio-group @change="changeSex" class="sex_radioGroup">
					<label style="margin-right: 30px;">
						<radio :value="male" :checked="male == profileForm.sex" class="sex_radio" color="#884e22" />
						<text>男</text>
					</label>
					<label>
						<radio :value="female" :checked="female == profileForm.sex" class="sex_radio" color="#884e22" />
						<text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="form_item">
				<text class="text">生日</text>
				<text @click="show = true"
					style="flex-grow: 1;">{{profileForm.birth_date ? profileForm.birth_date :'请选择日期'}}</text>
				<u-datetime-picker :show="show" title="请选择" v-model="currentDate" mode="date" :minDate="0"
					:maxDate="currentDate" :closeOnClickOverlay="true" @confirm="confirm" @close="close"
					@cancel="close">
				</u-datetime-picker>
			</view>
			<view class="save" @click="save">保存</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				chooseAvaters: false, // 操作菜单的显示隐藏
				lists: [ // 操作菜单的列表内容
					{
						name: '更换头像'
					},
					{
						name: '查看头像'
					}
				],
				defaultImg: "/static/personalCenter/default.png",
				show: false,
				currentDate: Number(new Date()),
				male: '1',
				female: '2',
				user_id: null,
				header_img: null,
				profileForm: {}
			}
		},
		computed: {
			...mapState('userInfo', ['userInfo'])
		},
		onLoad() {
			this.user_id = this.userInfo.id
			this.profileForm.name = this.userInfo.name
			this.profileForm.birth_date = this.userInfo.birth_date.slice(0, 10)
			this.profileForm.sex = this.userInfo.sex
			this.profileForm.phone = this.userInfo.phone
			this.profileForm.password = this.userInfo.password
			this.header_img = this.userInfo.header_img
		},
		methods: {
			...mapMutations('userInfo', ['updateUserInfo']),
			// 处理日期的函数
			formatDate(date) {
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				return YY + MM + DD;
			},
			openAvater() {
				this.chooseAvaters = true
			},
			closeAvaters() {
				this.chooseAvaters = false
			},
			editAvater(e) {
				if (e.name === '更换头像') {
					this.chooseMedia()
				} else {
					this.previewImage()
				}
			},
			chooseMedia() {
				uni.chooseMedia({
					count: 1, //限制图片上传数量，封顶9张
					success: (res) => { //拿到图片的返回数据
						// this.$set(this.profileForm, 'header_img', res.tempFiles[0].tempFilePath)
						this.header_img = res.tempFiles[0].tempFilePath
					}
				})
			},
			previewImage() {
				let img = this.header_img ? this.header_img : this.defaultImg
				uni.previewImage({
					urls: [img], //拿头像地址
				})
			},
			changeSex(e) {
				this.profileForm.sex = e.detail.value
			},
			confirm(e) {
				this.close()
				this.profileForm.birth_date = this.formatDate(e.value)
			},
			close() {
				this.show = false
			},
			save() {
				let data = {
					...this.profileForm,
					header_img: this.header_img
				}
				if (this.profileForm.name === '') {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写姓名',
						duration: 500,
						position: "top",
					})
					return;
				}
				uni.$http.put(`/api/user/${this.user_id}`, data).then(res => {
					if (res.data.result) {
						this.$refs.uToast.show({
							type: 'success',
							message: '保存成功',
							duration: 500,
							position: "top",
							complete: () => {
								this.updateUserInfo(res.data.result)
								uni.navigateBack()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modifyProfile {
		font-size: 14px;

		.profile_avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px 0 30px;
			border-bottom: 1px solid #f1f1f1;
			border-top: 1px solid #f1f1f1;

			.img {
				width: 70px;
				height: 70px;
				border-radius: 50%;
			}
		}

		.profile_form {
			padding: 0 15px;

			.form_item {
				display: flex;
				align-items: center;
				padding: 20px 0;
				border-bottom: 1px solid #f1f1f1;

				.text {
					padding-right: 50px;
				}

				.sex_radioGroup {
					.sex_radio {
						transform: scale(0.7);
					}
				}
			}

			.save {
				font-size: 16px;
				background-color: #884e22;
				color: #fff;
				line-height: 42px;
				text-align: center;
				margin: 35px 5px;
			}
		}
	}
</style>